﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="source/ui.jqgrid.css" rel="stylesheet" />
    <link href="source/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
    <script src="source/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>
        <script src="source/jquery-ui-1.10.4.custom.min.js"></script>
        <script src="source/grid.locale-en.js"></script>
    <script src="source/jquery.jqGrid.min.js"></script>
    <script src="data.js"></script>
</head>
<body>
    <table id="list2"></table>
    <div id="pager2"></div>

    <input type="button" id="btn1" value="Edit" />
</body>
</html>
<script>
    jQuery("#list2").jqGrid({
        datatype: "local",
        height: "auto",
        colNames: ['ID', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes', "age1", "age2"],
        colModel: [
            { name: 'id', index: 'id', width: 60, align: 'center', sorttype: 'date', frozen: true },
            { name: 'invdate', index: 'invdate', width: 100, frozen: true },
            { name: 'name', index: 'name', width: 200 },
            { name: 'amount', index: 'amount', width: 200, align: "right", sorttype: "float" },
            { name: 'tax', index: 'tax', width: 200, align: "right", sorttype: "float" },
            { name: 'total', index: 'total', width: 200, align: "right", sorttype: "float", formatter: 'integer', formatoptions: { thousandsSeparator: ',' } },
            { name: 'note', index: 'note', width: 200, sortable: false },
            { name: 'age1', index: 'age1', width: 200, editablt: true },
            { name: 'age2', index: 'age2', width: 200, editable: true }
        ],
        ondblClickRow: function (id) {
            var r = $(this).jqGrid('getRowData', id);
            r.age1 = "1111";
            var f = $(this).jqGrid('setRowData', id, r, "color:red");

        },
        //sort
        sortorder: "desc",
        //width height
        width: 700,
        height: 'auto',
        //edit arguments
        //forceFit: true,
        //cellEdit: true,
        //cellsubmit: 'clientArray',
        //paging
        pager: '#pager2',
        //row number
        rowNum: 10,
        rowList: [10, 20, 30],
        viewrecords: true,
        caption: "Manipulating Array Data",
        shrinkToFit: false,
        editurl: "server.aspx"
    });

    var mydata = json.rows;
    for (var i = 0; i <= mydata.length; i++) {
        jQuery("#list2").jqGrid('addRowData', i + 1, mydata[i]);
    }

    jQuery("#list2").jqGrid('setGroupHeaders', {
        useColSpanStyle: false,
        groupHeaders: [
            { startColumnName: 'id', numberOfColumns: 1, titleText: 'Client' },
          { startColumnName: 'age1', numberOfColumns: 1, titleText: 'Client Details' }

        ]
    });

    jQuery("#list2").jqGrid('setFrozenColumns');
    jQuery("#list2").jqGrid('sortGrid', "id");

    $("#btn1").click(function () {
        var gr = jQuery("#list2").jqGrid('getGridParam', 'selrow');
        if (gr != null) {
            jQuery("#list2").jqGrid('editGridRow', gr, { height: 280, reloadAfterSubmit: false });
        } else {
            alert("Please Select Row");
    }})

</script>
